import React, { useDebugValue, useEffect, useState } from 'react'
// 自定义 hook 函数
export default function useClientWidth() {
  //定义一个状态
  let [width, setWidth] = useState(document.documentElement.clientWidth)
  //在 react 开发者工具中查看调试的值
  useDebugValue(width);
  //绑定事件 当视口的大小发生变化的时候, 更新返回的值
  useEffect(() => {
    //绑定 resize 事件
    window.addEventListener('resize', () => {
      setWidth(document.documentElement.clientWidth);
    })
  }, [])
  
  return width;
}
